<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 编写样式代码 -->
    <style>
        #tip{
            border: solid 1px #ccc;
            width: 200px;
            margin: 0 auto;
            padding: 10px 0;
            text-align: center;

        }
        .red{
            background-color: red;
            color: white;
        }
    </style>
    <!-- 导入jq框架 -->
    <script src="../jquery.min.js"></script>
</head>
<body>
    <div id="tip">
        hello world
    </div>
    <div>a</div>
    <div id="mid">b</div>
    <div>c</div>

    <div id="parent">
        <div>我是原有内容</div>
        <!--1 动态创建一个子类元素 
            2 id为child
            3 内容为我是一个动态元素
            4 红色的字体 -->
    </div>
    <script>
        //获取指定id的jq对象，并向对象添加类别样式和css手写样式
        $("#tip").addClass("red").css("color","white");

        $("#tip").on("click",function(){
            $("#tip").toggleClass("red");
        })
        //根据层级结构获取元素，更改元素属性和样式
        $("#mid").prev().html("bbb").css("color","red");
        console.log($("#mid").next().text());

        //创建一个div元素
        var $div = $("<div></div>");
        $div.attr("id","child").html("我是一个动态元素").css("color","red");
        console.log($div);
        $("#parent").append($div);
        $("#parent").prepend($div);
    </script>
</body>
</html>